<template>
  <!-- 点赞、分享、收藏 -->
  <div class="imglist flexsc mt-1">
    <el-image
      v-for="(url, index) in item.imgList"
      :src="url"
      :preview-src-list="item.imgListAll"
      :initial-index="index"
      fit="cover"
    />
    <div
      class="more flexcc"
      v-if="item.imgListAll?.length > 9"
    >
      {{ `+${item.imgListAll?.length - 9}` }}
    </div>
  </div>
  <div
    v-if="!['0', '1'].includes(item.trendsType)"
    class="action"
  >
    <img
      src="@/assets/img/icon_dianzan_nor.png"
      v-if="!item.likeFlag"
      @click.stop="changeLike(0, item)"
    />
    <img
      src="@/assets/img/icon_dianzan_pre.png"
      v-if="item.likeFlag"
      @click.stop="changeLike(1, item)"
    />
    <img
      src="@/assets/img/icon_pingjia.png"
      @click.stop="onPingjia(item, true)"
      v-if="!item.commentFlag"
    />
    <img
      src="@/assets/img/icon_pingjia_pre.png"
      @click.stop="onPingjia(item, false)"
      v-if="item.commentFlag"
    />
    <img
      src="@/assets/img/icon_fenxiang.png"
      @click.stop="shareFlagChange(item, true)"
      v-if="!item.shareFLag"
    />
    <img
      src="@/assets/img/icon_fenxiang_pre.png"
      @click.stop="shareFlagChange(item, false)"
      v-if="item.shareFLag"
    />
    <img
      src="@/assets/img/icon_shoucang_nor.png"
      v-if="!item.collectFlag"
      @click.stop="changeCollect(0, item)"
    />
    <img
      src="@/assets/img/icon_shoucang_pre.png"
      v-if="item.collectFlag"
      @click.stop="changeCollect(1, item)"
    />
    <img
      src="@/assets/img/icon_baojing.png"
      alt=""
      @click.stop="openReport(item)"
    />
  </div>
  <div class="likeList">
    <img
      :src="avatar"
      v-for="{ avatar, id } in item.likeAvatars"
      @click="!$isMobile && openUrl(`/member`, {id})"
    />
  </div>
  <div
    class="share"
    v-if="item.shareFLag"
  >
    <img
      src="@/assets/img/icon_link.png"
      @click.stop="shareFn('link', item)"
    />
    <img
      src="@/assets/img/icon_facebook.png"
      @click.stop="shareFn('QRCode', item)"
    />
    <img
      src="@/assets/img/icon_tite.png"
      @click.stop="shareFn('QRCode', item)"
    />
    <img
      src="@/assets/img/icon_xinlang.png"
      @click.stop="shareFn('QRCode', item)"
    />
    <img
      src="@/assets/img/icon_weixin.png"
      @click.stop="shareFn('QRCode', item)"
    />
  </div>
  <div
    v-if="item.commentList?.length || item.commentFlag"
    :span="24"
  >
    <div class="comment mt-1">
      <div v-if="item.commentFlag" :class="['comment-input', { mobile: $isMobile }]">
        <el-input
          v-model="item.commentValue"
          placeholder=""
          clearable
          :maxlength="500"
        />
        <el-button
          type="primary"
          :disabled="!item.commentValue"
          @click="postCommentFn(item)"
          >{{ t('blog.comment') }}</el-button
        >
      </div>

      <!-- <div
        v-if="!item.commentList?.length"
        style="color: #aaa"
      >
        {{ t('blog.c1') }}
      </div> -->

      <div
        :span="24"
        class="user-info mt-2"
        v-for="child in item.commentList"
        :key="child"
      >
        <div class="head-sculpture">
          <img :src="child.customerAvatar" />
        </div>
        <div class="name wp-100">
          <div class="flexsb">
            <h2>
              {{ child.customerName }}
            </h2>
            <span class="date">{{ dateFormat(child.commentDate, 2) }}</span>
          </div>
          <p>{{ child.commentContent }}</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 举报 -->
  <Report
    v-if="reportDialog"
    v-model="reportDialog"
    :id="reportId"
  />

  <!-- 二维码分享 -->
  <el-dialog
    v-model="QrCodeVis"
    :title="t('blog.dlt2')"
    width="400px"
    destroy-on-close
    center
  >
    <div class="flexcc">
      <img
        :src="currentLinkImg"
        width="200"
      />
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, watch, getCurrentInstance, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { cancelFavorite, articleLike, articleCancelLike, articleCollect, generateQrCode, getCommentList, postComment } from '@/service/blog.js'
import axios from 'axios'
import { useI18n } from 'vue-i18n'
import { dateFormat, openUrl } from '@/utils'
import useClipboard from 'vue-clipboard3'
import useLogin from '@/stores/login'

import Report from './Report.vue'
const { $isMobile } = getCurrentInstance().appContext.config.globalProperties

const router = useRouter()
const storeLogin = useLogin()

const { toClipboard } = useClipboard()
const copy = async (text) => {
  try {
    await toClipboard(text)
    ElMessage.success(t('news.copy'))
  } catch (e) {}
}

const props = defineProps({
  item: {
    type: Object,
    default: () => {}
  },
  idkey: {
    type: String,
    default: 'id'
  }
})
const emit = defineEmits(['getList'])

const { t, locale } = useI18n()

onMounted(()=>{
  getCurComment(props.item)
})

//点赞||取消点赞
const likeLoading = ref(false)
const changeLike = (value, item) => {
  if (likeLoading.value) return
  likeLoading.value = true
  let data = {
    customerId: JSON.parse(localStorage.getItem('login'))?.userInfo?.id,
    objType: 0,
    objId: item[props.idkey]
  }
  if (value == 0) {
    articleLike(data)
      .then((res) => {
        item.likeFlag = true
        emit('getList')
      })
      .finally(() => {
        likeLoading.value = false
      })
  } else {
    articleCancelLike(data)
      .then((res) => {
        item.likeFlag = false
        emit('getList')
      })
      .finally(() => {
        likeLoading.value = false
      })
  }
}

// 收藏|取消收藏
const collectLoading = ref(false)
const changeCollect = (value, item) => {
  if (collectLoading.value) return
  collectLoading.value = true
  let data = {
    customerId: JSON.parse(localStorage.getItem('login'))?.userInfo?.id,
    // objType:0,
    articleId: item[props.idkey]
  }
  if (value == 0) {
    articleCollect(data)
      .then((res) => {
        item.collectFlag = true
        emit('getList')
      })
      .finally(() => {
        collectLoading.value = false
      })
  } else {
    cancelFavorite(data)
      .then((res) => {
        item.collectFlag = false
        emit('getList')
      })
      .finally(() => {
        collectLoading.value = false
      })
  }
}
const shareFlagChange = (item, value) => {
  item.shareFLag = value
}

//分享
const QrCodeVis = ref(false)
const currentLinkImg = ref('')
const shareFn = (type, item) => {
  const id = item[props.idkey]
  const { origin, pathname } = window.location
  const url = `${origin}${pathname}#/blogDetail?id=${id}`

  if (type == 'link') {
    copy(url)
  } else {
    generateQrCode({ link: url }).then((res) => {
      currentLinkImg.value = window.URL.createObjectURL(res)
      QrCodeVis.value = true
    })
  }
}

const onPingjia = (item, value) => {
  item.commentFlag = value
  getCurComment(item)
}

// 评论列表
const getCurComment = (row) => {
  getCommentList({ pageNum: 1, pageSize: 10 }, { articleId: row[props.idkey] }).then((res) => {
    row.commentList = res.rows
  })
}

const postCommentFn = (row) => {
  let data = {
    articleId: row[props.idkey],
    commentContent: row.commentValue,
    // commentDate:new Date().getTime(),
    customerId: JSON.parse(localStorage.getItem('login'))?.userInfo?.id,
    commentLocation: IPValue.value
  }
  postComment(data).then((res) => {
    getCurComment(row)
    row.commentValue = ''
  })
}

// ip
const IPValue = ref('')
const getIP = () => {
  if (localStorage.getItem('IP')) return
  axios.get('https://qifu-api.baidubce.com/ip/local/geo/v1/district').then((res) => {
    IPValue.value = res.data.data.country + res.data.data.city
    localStorage.setItem('IP', IPValue.value)
  })
}

// 举报
const reportDialog = ref(false)
const reportId = ref(null)
const openReport = (row) => {
  if (!storeLogin.userInfo) {
    ElMessage.warning(t('notLoginMsg'))
    storeLogin.setLoginDialog(true)
    if($isMobile){
      openUrl('/login')
    }
    return
  }
  reportId.value = row[props.idkey]
  reportDialog.value = true
}

//
getIP()
</script>

<style scoped lang="scss">
.user-info {
  display: flex;
  cursor: pointer;

  .head-sculpture {
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 12px;
    }
  }

  .name {
    h2 {
      font-size: 16px;
      font-weight: bold;
      color: #252628;

      .date {
        font-size: 14px;
        font-weight: 400;
        color: #9d9fa5;
      }
    }

    p {
      font-size: 14px;
      font-weight: 400;
      color: #9d9fa5;
      margin-top: 4px;
    }
  }
}

.imglist {
  .el-image {
    width: 100px;
    height: 100px;
    background: #eaebec;
    margin-right: 14px;
    margin-bottom: 5px;
  }
  .more {
    width: 100px;
    height: 100px;
    background: rgba(0, 0, 0, 0.3);
    margin-left: -114px;
    position: relative;
    z-index: 9;
    color: #fff;
    font-size: 28px;
    pointer-events: none;
  }
}

.action {
  margin-bottom: 15px;
  margin-top: 15px;

  img {
    width: 20px;
    height: 20px;
    margin-right: 20px;
    cursor: pointer;
  }
}

.share {
  width: 100%;
  height: 30px;
  padding: 5px;
  background: #fff;

  img {
    width: 20px;
    height: 20px;
    margin-left: 20px;
  }
}

.comment {
  width: 100%;
  background: #fff;
  padding: 28px 27px 28px 31px;

  .comment-input {
    display: grid;
    grid-template-columns: auto 150px;
    column-gap: 20px;

    &.mobile {
      grid-template-columns: auto 80px;
    }
  }
}

.likeList {
  img {
    width: 30px;
    height: 30px;
    background: #d99993;
    border-radius: 4px;
    margin-right: 10px;
    cursor: pointer;
  }
}
</style>
